<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单确认 - 简约超市系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/styles/coupons-ai.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="/styles/order-confirm-ai.css">
    <link rel="icon" href="/photo/Profile picture/log.ico" type="image/x-icon">
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="page-header">
                <h1 class="page-title">
                    <i class="fas fa-shopping-cart"></i>
                    订单确认
                </h1>
                <div class="steps">
                    <span class="step active">1. 确认订单</span>
                    <span class="step">2. 付款</span>
                    <span class="step">3. 完成</span>
                </div>
            </div>

            <!-- 地址卡片 -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-map-marker-alt"></i>
                        收货地址
                    </h3>
                    <button class="btn-action" @click="openNewAddress">
                        <i class="fas fa-plus"></i>
                        添加新地址
                    </button>
                </div>

                <div class="address-container">
                    <div v-for="(address, index) in addresses" :key="address.id"
                        :class="['address-card', { 'selected': index === selectedIndex }]"
                        @click="selectAddress(address, index)">
                        <span v-if="address.isDefault" class="default-tag">默认</span>
                        <div class="address-info">
                            <div class="address-name">{{ address.name }}</div>
                            <div class="address-text">{{ address.address }}</div>
                            <div class="address-phone">电话: {{ address.phone }}</div>
                        </div>
                        <div class="address-actions">
                            <button class="btn-action" @click.stop="editAddress(address)">
                                <i class="fas fa-edit"></i>
                                编辑
                            </button>
                            <button v-if="address.isDefault" class="btn-action" style="color: var(--success);">
                                <i class="fas fa-check-circle"></i>
                                已默认
                            </button>
                            <button v-else class="btn-action" @click.stop="setDefaultAddress(address)">
                                <i class="fas fa-star"></i>
                                设为默认
                            </button>
                        </div>
                    </div>

                    <div v-if="addresses.length === 0" class="no-address">
                        <i class="fas fa-map-marker-alt fa-3x" style="color: #ccc; margin-bottom: 15px;"></i>
                        <p>暂无收货地址，请添加</p>
                    </div>
                </div>
            </div>

            <!-- 订单信息卡片 -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-file-invoice"></i>
                        订单信息
                    </h3>
                    <span>共 {{ orderItems.length }} 件商品</span>
                </div>

                <div class="order-items">
                    <div class="order-header">
                        <span>商品</span>
                        <span>单价</span>
                        <span>数量</span>
                        <span>小计</span>
                    </div>

                    <div class="order-item" v-for="item in orderItems" :key="item.commodityId">
                        <div class="item-info">
                            <div>
                                <img class="item-image" :src="item.commodityPicture[0].commodityImageUrl" alt="商品图片"
                                    class="item-img">
                            </div>
                            <div class="item-details">
                                <p class="item-name">
                                        {{ item.commodityName }}
                                        <span v-if="item.spec1 || item.spec2" class="item-specs" style="color: #999; font-size: 12px; margin-left: 8px;">
                                            ({{ item.spec1 }}{{ item.spec1 && item.spec2 ? '，' : '' }}{{ item.spec2 }})
                                        </span>
                                    </p>
                            </div>
                        </div>
                        <div class="item-price">¥{{ item.commoditySalePrice }}</div>
                        <div class="item-quantity">{{ item.commodityNum }}</div>
                        <div class="item-subtotal">¥{{ (item.commoditySalePrice * item.commodityNum).toFixed(2) }}</div>
                    </div>
                </div>

                <div class="order-notes">
                    <label class="notes-label">订单备注</label>
                    <textarea class="notes-input" v-model="orderNotes" placeholder="请输入备注信息（付款后商家可见）"
                        maxlength="200"></textarea>
                    <div class="char-count">{{ orderNotes.length }}/200</div>
                </div>
            </div>

            <!-- 支付详情卡片 -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-credit-card"></i>
                        支付详情
                    </h3>
                </div>

                <div class="payment-summary">
                    <div class="summary-row">
                        <span class="summary-label">商品总价</span>
                        <span class="summary-value">¥{{ rawOrderTotalAmount }}</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-label">运费</span>
                        <span class="summary-value">¥0.00</span>
                    </div>
                    <div class="summary-row">
                        <span class="summary-label">优惠券</span>
                        <span class="summary-value discount-value" @click="openCouponSelectionModal">
                            <span v-if="selectedCoupon" style="color: red;">-¥{{ selectedCoupon.couponPrice.toFixed(2) }}</span>
                            <button v-else class="btn-select-coupon-main"><i class="fas fa-tags"></i> 选择优惠券</button>
                            <i class="fas fa-chevron-right"></i>
                        </span>
                    </div>
                    <div class="summary-row total-row">
                        <span class="summary-label">实付款</span>
                        <span class="total-amount">¥{{ orderTotalAmount }}</span>
                    </div>
                </div>

                <div class="submit-container">
                    <button class="submit-btn" @click="submitOrder">
                        <i class="fas fa-check-circle"></i>
                        提交订单
                    </button>
                </div>
            </div>
        </div>
        <div id="alipay-container" v-html="alipayForm"></div>
        

        <!-- 地址模态框 -->
        <div id="newAddressModal" class="modal" :style="{ display: showModal ? 'flex' : 'none' }">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">{{ editMode ? '修改地址' : '新建地址' }}</h3>
                    <button class="close-btn" @click="showModal = false">&times;</button>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label>收货人姓名</label>
                        <input type="text" v-model="currentAddress.name" placeholder="请输入姓名">
                    </div>

                    <div class="form-group">
                        <label>手机号码</label>
                        <input type="text" v-model="currentAddress.phone" placeholder="请输入手机号码">
                    </div>

                    <div class="form-group">
                        <label>所在地区</label>
                        <div class="address-selects">
                            <select v-model="currentAddress.province" @change="onProvinceChange">
                                <option value="">选择省份</option>
                                <option v-for="p in provinces" :key="p" :value="p">{{ p }}</option>
                            </select>
                            <select v-model="currentAddress.city" @change="onCityChange">
                                <option value="">选择城市</option>
                                <option v-for="c in cities" :key="c" :value="c">{{ c }}</option>
                            </select>
                            <select v-model="currentAddress.district">
                                <option value="">选择区县</option>
                                <option v-for="d in districts" :key="d" :value="d">{{ d }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>详细地址</label>
                        <textarea v-model="currentAddress.address" placeholder="请输入详细地址信息"></textarea>
                    </div>

                    <div class="form-group">
                        <label>
                            <input type="checkbox" v-model="currentAddress.isDefault">
                            设置为默认地址
                        </label>
                    </div>

                    <button class="save-address-btn" @click="saveAddress">
                        {{ editMode ? '更新地址' : '保存地址' }}
                    </button>
                </div>
            </div>
        </div>
                <!-- 优惠券选择模态框 -->
        <div id="couponSelectionModal" class="modal" :style="{ display: showCouponModal ? 'flex' : 'none' }">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">选择优惠券</h3>
                    <button class="close-btn" @click="showCouponModal = false">&times;</button>
                </div>
                <div class="modal-body">
                    <div v-if="availableCoupons.length === 0 && !isLoadingCoupons" class="no-coupons-message">
                        <p>暂无可用优惠券</p>
                    </div>
                    <div v-else-if="isLoadingCoupons" class="loading-indicator">
                        <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </div>
                    <div v-else class="coupon-selection-list">
                        <div class="coupon-item-selectable" v-for="coupon in availableCoupons" :key="coupon.id"
                            @click="selectCoupon(coupon)"
                            :class="{ 'selected': selectedCoupon && selectedCoupon.id === coupon.id }">
                            <div class="coupon-value">
                                ¥<span>{{ coupon.couponPrice }}</span>
                            </div>
                            <div class="coupon-details">
                                <h3>{{ coupon.couponName }}</h3>
                                <p class="coupon-condition">满{{ coupon.couponCondition }}元可用</p>
                                <p class="coupon-expiry">有效期至: {{ coupon.couponEndTime }}</p>
                            </div>
                            <div class="coupon-actions">
                                <i v-if="selectedCoupon && selectedCoupon.couponId === coupon.couponId" class="fas fa-check-circle selected-icon"></i>
                                <button v-else class="btn-select-coupon">选择</button>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn-clear-coupon" @click="clearSelectedCoupon">不使用优惠券</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 支付模态框 -->
        <div id="alipay-container" v-html="alipayForm"></div>
    </div>

    <script src="/js/order-confirm-ai.js"></script>

</body>

</html>